<!--
 * @Author: 曹家睿 17799623735@163.com
 * @Date: 2023-12-06 18:53:37
 * @LastEditors: zhangduo 445629906@qq.com
 * @LastEditTime: 2023-12-11 03:42:43
 * @FilePath: \mdbj-ui\src\views\mypage\roadinspection\inceptionmanager\addPanel.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by 曹家睿, All Rights Reserved. 
-->
<template>
  <div>
    <el-col :span="24" class="title-row">
      <span>| 新增巡查记录</span>
    </el-col>
    <el-form
      id="elForm"
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="92px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="道路编码" prop="roadcode">
            <el-input
              v-model="formData.roadcode"
              placeholder="请输入道路编码"
              clearable
              :style="{ width: '100%' }"
              disabled
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="道路名称" prop="roadname">
            <el-input
              v-model="formData.roadname"
              placeholder="请输入道路名称"
              clearable
              :style="{ width: '100%' }"
              disabled
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡查人员" prop="inspector">
            <el-input
              v-model="formData.inspector"
              placeholder="请输入巡查人员"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡查时间" prop="inspectiontime">
            <el-date-picker
              v-model="formData.inspectiontime"
              format="yyyy-MM-dd"
              value-format="timestamp"
              :style="{ width: '100%' }"
              placeholder="请选择巡查时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="巡查结果" prop="inspectioncontent">
            <el-input
              type="textarea"
              v-model="formData.inspectioncontent"
              placeholder="请输入巡查结果"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传照片" prop="field130">
            <el-upload
              action="#"
              :auto-upload="false"
              list-type="text"
              :file-list="picFileList"
              :on-remove="handleRemove"
              :on-change="handleChange"
              name="attachment"
              :multiple="true"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="footer">
        <el-button type="primary" @click="submitForm" icon="el-icon-check"
          >提交</el-button
        >
        <!-- <el-button @click="resetForm">重置</el-button> -->
        <el-button
          type="primary"
          plain
          icon="el-icon-circle-close"
          @click="cancel"
          >返回</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import Graphic from "@arcgis/core/Graphic";
import { v4 as uuidv4 } from "uuid";
import { addAttach } from "../../../../api/attachment/attach";
export default {
  props: {
    paramObj: { default: () => {} },
    mapview: { default: () => {} },
  },
  inject: ["toggleComponent"],
  data() {
    return {
      rules: {
        inspector: [
          {
            required: true,
            message: "请输入巡查人员",
            trigger: "blur",
          },
        ],
        inspectiontime: [
          {
            required: true,
            message: "请输入巡查时间",
            trigger: "blur",
          },
        ],
        inspectioncontent: [
          {
            required: true,
            message: "请输入巡查结果",
            trigger: "blur",
          },
        ],
      },
      feature: undefined,
      formData: {
        objectid: undefined,
        roadcode: undefined,
        roadname: undefined,
        inspector: undefined,
        inspectiontime: undefined,
        inspectioncontent: undefined,
        photo: undefined,
      },
      picFileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      deleteAttachmentIds: [],
      addAttachments: [],
      roadcode: undefined,
      roadname: undefined,
      // 要素图层url
      featureLayerUrl:
        window.mapConfig.operationLayers.featurelayers["inspectionrecords"].url,
    };
  },
  activated() {
    let _self = this;
    _self.roadcode = this.paramObj.roadcode;
    _self.roadname = this.paramObj.roadname;

    if (this.paramObj.featureLayer)
      _self.featureLayer = this.paramObj.featureLayer;
    else
      _self.featureLayer = new FeatureLayer({
        title: "巡查记录管理",
        url: _self.featureLayerUrl,
        outFields: ["objectid"],
      });
    _self.addAttachments = [];
    _self.formData.roadcode = _self.roadcode;
    _self.formData.roadname = _self.roadname;
  },
  deactivated() {
    let _self = this;
    _self.roadcode = undefined;
    _self.roadname = undefined;
    _self.featureLayer = undefined;
    _self.addAttachments = [];
  },
  methods: {
    submitForm() {
      let _self = this;

      _self.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        const attachGroupId = uuidv4();
        // 新增要素
        // const attributes = {
        //   roadcode: _self.formData.objcode,
        //   roadname: _self.formData.objcname,
        //   inspector: _self.formData.type,
        //   inspectiontime: _self.formData.type_m,
        //   inspectioncontent: _self.formData.type_s,
        //   photo: attachGroupId,
        // };
        _self.formData.photo = attachGroupId;
        const addFeature = new Graphic({
          attributes: _self.formData,
        });

        const edits = {
          addFeatures: [addFeature],
        };
        //   更新要素
        _self.featureLayer.applyEdits(edits).then(() => {
          _self.$message.success("新增成功");
          _self.addAttachment(attachGroupId);
          _self.$message.success("新增成功");
          //   退出
          _self.cancel();
        });
      });
    },
    // 添加附件
    addAttachment(attachGroupId) {
      let _self = this;
      const formData = new FormData();
      _self.addAttachments.forEach((attach) => {
        formData.append("files", attach.raw);
      });
      formData.append("attachGroupId", attachGroupId);
      addAttach(formData).then((data) => {
        console.log(data);
      });
    },
    // 获取要删除的附件id
    handleRemove(file, fileList) {
      console.log(file);
      // 如果是附件列表里存在则添加到待删除附件列表里
      if (file.url != undefined && file.url.indexOf("attachfiles") > 0)
        this.deleteAttachmentIds.push(file.id);
      this.addAttachments = this.addAttachments.filter(
        (val) => val.uid !== file.uid
      );
    },

    // 获取
    handleChange(file, fileList) {
      this.addAttachments.push(file);
      console.log(this.addAttachments);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    cancel() {
      let _self = this;
      this.$refs["elForm"].resetFields();
      _self.picFileList = [];
      // 删除临时图形
      if (_self.selectedGraphic)
        _self.udpateGraphicsLayer.remove(_self.selectedGraphic);
      _self.mapview.graphics.removeAll();
      // 删除微件
      _self.mapview.ui.remove(_self.sketch);
      const paramObj = {
        roadcode: _self.roadcode,
        roadname: _self.roadname,
      };
      console.log("paramObj", paramObj);
      // 切换组件
      this.toggleComponent("inceptionDataPanel", paramObj);
    },
  },
};
</script>

<style lang="scss" scoped>
.title-row {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 1vh;
}
.footer {
  margin-bottom: 1vh;
  display: flex;
  justify-content: center;
}
</style>
